<template>
  <el-aside>
    <div class="aside-header">
      <span style="padding-left: 20px; font-size: 90%; font-weight: 800;">分类列表</span>
      <i class="el-icon-setting" @click="setting"></i>
    </div>
    <el-menu :default-active="'0'">
      <el-menu-item :index="'0'" @click="selectType()">
        <icon-font icon="menu" />
        {{ '全部商品' }}
      </el-menu-item>
      <el-menu-item
        :index="item.id + ''"
        v-for="item in types"
        :key="item.id"
        @click="selectType(item)"
      >
        <icon-font icon="leaf" />
        {{ item.name }}
      </el-menu-item>
    </el-menu>

    <el-dialog title="商品类型管理" :visible.sync="dialogVisible" center :close-on-click-modal="false">
      <ul class="manaTypes">
        <li v-for="(item, index) in manaType.types" :key="index">
          <el-input
            type="text"
            ref="typeRef"
            v-model.trim="item.name"
            placeholder="请输入类型名称"
            :clearable="true"
          />
          <el-input type="number" v-model.number="item.sort" placeholder="排序码" />
          <el-tooltip class="item" effect="dark" content="删除" placement="right">
            <el-link type="danger" :underline="false" @click="removeType(index)">
              <i class="el-icon-view el-icon-close"></i>
            </el-link>
          </el-tooltip>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" @click="addType">新 增</el-button>
        <el-button type="primary" @click="submitType">保 存</el-button>
      </span>
    </el-dialog>
  </el-aside>
</template>

<script>
import { deepClone } from '@/lib/util'
import { getMax } from '@/lib/tools'
import { getTypes, generateType } from '@/api/product'

export default {
  name: 'productType',
  data() {
    return {
      types: [],
      dialogVisible: false,
      manaType: {
        types: [],
        removeTypes: []
      }
    }
  },
  watch: {
    types() {
      this.$emit("updateTypes", this.types)
    }
  },
  async created() {
    await this.loadTypes()
  },
  methods: {
    async loadTypes() {
      let { data } = await getTypes()
      this.types = data
    },
    setting() {
      this.dialogVisible = true
      this.manaType.types = deepClone(this.types)
      this.removeTypes = []
    },
    addType() {
      let max = getMax(this.manaType.types, item => item.sort)
      this.manaType.types.push({ id: 0, name: '', sort: max + 1 })
      this.$nextTick(() => {
        this.$refs['typeRef'][this.$refs['typeRef'].length - 1].focus()
      })
    },
    removeType(index) {
      let type = this.manaType.types.splice(index, 1)[0]
      if (type.id > 0) {
        this.manaType.removeTypes.push(Object.assign({}, type))
      }
    },
    submitType() {
      this.$confirm('确定保存吗？', '提示', {
        closeOnClickModal: false
      })
        .then(async () => {
          this.manaType.types.forEach(item => (item.flag = item.id > 0 ? 1 : 0))
          this.manaType.removeTypes.forEach(a => (a.flag = 2))
          let arr = deepClone(this.manaType.types).concat(
            deepClone(this.manaType.removeTypes)
          )
          this.dialogVisible = false
          let loading = this.$$loading()
          let { data } = await generateType(arr)
          this.types = data.sort((a, b) => a.sort - b.sort)
          loading.close()
          this.$notify({
            title: '提示',
            message: '保存成功'
          })
        })
        .catch(() => {})
    },
    selectType(type) {
      this.$emit('clickType', type)
    }
  }
}
</script>

<style scoped lang="scss">
.el-aside {
  background: #ededed;
  padding: 0;
  border: solid 1px #ddd;
  width: 300px;
  overflow: hidden;
  margin: 0;
}
.aside-header {
  display: flex;
  background-color: #fff;
  height: 59px;
  justify-content: space-between;
  align-items: center;

  .el-icon-setting {
    margin-right: 20px;
    font-size: 1.4em;
    color: #1890ff;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      transform: rotate(90deg);
      color: #1b63a7;
    }
  }
}
.el-menu {
  border-right: none;
}
.el-menu-item {
  text-align: left;
  border-left: 3px solid transparent;
  border-bottom: 1px dashed #ccc;
  background-color: #ededed;

  &.is-active {
    border-left: 3px solid #1890ff;
    background-color: #fff;

    .iconfont {
      color: #1890ff !important;
    }
  }
}
.el-menu-item:first-child {
  border-top: 1px dashed #ccc;
}
.is-active::after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background-color: #1890ff;
  border-top: 1px solid #1890ff;
  border-left: 1px solid #1890ff;
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
  bottom: 0;
  margin: auto;
  right: -6px;
}

.manaTypes {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 400px;
  overflow: hidden;
  overflow-y: auto;

  li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;

    .el-input {
      margin-right: 10px;
      margin-bottom: 5px;
    }
    .el-icon-view {
      font-size: 1.5em;
    }
  }
}
</style>
